<template>
	<view class="wallet-balance">
		<!-- 身份信息弹窗 -->
		<uni-popup ref="identityPopup" type="center">
			<view class="modal-content">
				<view class="modal-title">请完善身份信息后，进行余额提现</view>
				<view class="modal-desc">根据监管规定，你需要完善身份信息，以正常使用余额全部功能</view>
				<view class="modal-buttons">
					<button class="button cancel" @click="closeIdentityPopup">暂不完善</button>
					<button class="button confirm" @click="goToCompleteIdentity">立即完善</button>
				</view>
			</view>
		</uni-popup>

		<!-- 钱包余额页面内容 -->
		<view class="content">

			<view class="module balance-module">
				<view class="balance-section">
					<view class="blance-header">
						<view class="balance-label">可用余额（元）</view>
						<view class="balance-amount">{{ availableBalance }}</view>
					</view>

					<button class="withdraw-button" @click="openWithdrawPopup">提现</button>
				</view>

				<view class="info-section">
					<view class="info-item">
						<view class="info-label">上月收入金额</view>
						<view class="info-value">{{ lastMonthIncome }}</view>
					</view>
					<view class="info-item">
						<view class="info-label">待结算金额</view>
						<view class="info-value">{{ pendingAmount }}</view>
					</view>
				</view>
			</view>

			<view class="module detail-module">
				<view class="detail-section">
					<view class="detail-title">余额明细</view>
					<view class="detail-item" @click="goToBalanceDetail">
						<view class="detail-time">{{balanceDetails.time}}</view>
						<view class="detail-amount-header">
							<view class="detail-amount">{{balanceDetails.amount}}</view>
							<uni-icons type="right" size="14" color="#888B9A"></uni-icons>
						</view>

					</view>
				</view>
			</view>

			<view class="module detail-module">
				<view class="detail-section">
					<view class="detail-title">提现明细</view>
					<view class="detail-item" @click="goToWithdrawalDetail">
						<view class="detail-time">{{withdrawalDetails.time || ''}}</view>
						<view class="detail-amount-header">
							<view class="detail-amount">{{withdrawalDetails.amount || ''}}</view>
							<uni-icons type="right" size="14" color="#888B9A"></uni-icons>
						</view>
					</view>
				</view>
			</view>

			<!-- <view class="module borrow-module">
				<view class="borrow-section">
					<view class="borrow-title">借钱</view>
					
					<view class="borrow-amount">112,000.00</view>
					<button class="borrow-button">借一笔</button>
				</view>
			</view> -->
		</view>


		<!-- 提现弹窗 -->
		<uni-popup ref="withdrawPopup" type="bottom">
			<view class="withdraw-content">
				<view class="withdraw-title">余额提现</view>
				<view class="amount-input-container">
					<text class="amount-symbol">¥</text>
					<input class="amount-input" v-model.number="withdrawAmount" @input="handleAmountInput" />
				</view>
				<view class="withdraw-desc">
					当前可用余额 {{ availableBalance.toFixed(2) }}
					<text class="withdraw-all" @click="withdrawAll">全部提现</text>
				</view>

				<view class="payment-methods">
					<!-- 微信支付 -->
					<view class="payment-method" @click="selectPaymentMethod('wechat')" v-if="isWechatBound">
						<image :src="getFullImageUrl('@/static/index/wechat.png')" class="payment-icon" style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"></image>
						<text>微信支付</text>
						<view class="checkbox" :class="{ 'checked': selectedPaymentMethod === 'wechat' }">
							<image :src="getFullImageUrl('@/static/index/select.png')" style="width: 36rpx;height: 36rpx;" class="checkbox-icon"
								v-if="selectedPaymentMethod === 'wechat'"></image>	
						</view>
					</view>
					<view class="payment-method" v-else>
						<image :src="getFullImageUrl('@/static/index/wechat.png')" class="payment-icon" style="width: 40rpx;height: 40rpx; margin-right: 20rpx;"></image>
						<text>微信支付</text>
						<text class="bind-link" @click="bindPayment('wechat')">立即绑定</text>
					</view>

					<!-- 支付宝支付 -->
					<!-- <view class="payment-method" @click="selectPaymentMethod('alipay')" v-if="isAlipayBound">
						<image src="/static/image/logo.jpg" class="payment-icon"></image>
						<text>支付宝支付</text>
						<view class="checkbox" :class="{ 'checked': selectedPaymentMethod === 'alipay' }">
							<image src="/static/image/selected.png" class="checkbox-icon"
								v-if="selectedPaymentMethod === 'alipay'"></image>
						</view>
					</view>
					<view class="payment-method" v-else>
						<image src="/static/image/logo.jpg" class="payment-icon"></image>
						<text>支付宝支付</text>
						<text class="bind-link" @click="bindPayment('alipay')">立即绑定</text>
					</view> -->
				</view>

				<!-- 修改确认按钮的绑定 -->
				<button class="confirm-button" @click="openPasswordPopup" :disabled="!isConfirmButtonActive"
					:class="isConfirmButtonActive ? 'active' : 'disabled'">确定</button>
				<view class="cancel-button" @click="closeWithdrawPopup">取消</view>
			</view>
		</uni-popup>

		<!-- 密码输入弹窗 -->
		<uni-popup ref="passwordPopup" type="bottom">
			<view class="password-content">
				<!-- 添加关闭按钮 -->
				<view class="password-header">
					<view class="password-title">余额提现</view>
					<view @click="closePasswordPopup"><uni-icons type="closeempty" size="20"></uni-icons></view>
				</view>

				<view class="password-amount">¥ {{ formattedWithdrawAmount }}</view>

				<!-- 服务费显示 -->
				<view class="password-fees">
					<view class="fee-item">
						<text>技术服务费:</text>
						<text class="fee-value">{{ bankFeeRate }}%</text>
					</view>
					<view class="fee-item">
						<text>官方费率:</text>
						<text class="fee-value">{{ platformFeeRate }}%</text>
					</view>
				</view>

				<!-- 密码输入点 - 修改为带黑色圆点的正方形 -->
				<view class="password-input">
					<view class="password-dots">
						<view class="dot-container" v-for="(dot, index) in 6" :key="index">
							<view class="dot" :class="{ 'active': index < password.length }"></view>
						</view>
					</view>
				</view>

				<!-- 数字键盘 - 调整为4行3列，第四行改为确定、0、删除 -->
				<view class="number-pad">
					<view class="number-row">
						<view class="number-button" @click="inputPassword(1)">1</view>
						<view class="number-button" @click="inputPassword(2)">2</view>
						<view class="number-button" @click="inputPassword(3)">3</view>
					</view>
					<view class="number-row">
						<view class="number-button" @click="inputPassword(4)">4</view>
						<view class="number-button" @click="inputPassword(5)">5</view>
						<view class="number-button" @click="inputPassword(6)">6</view>
					</view>
					<view class="number-row">
						<view class="number-button" @click="inputPassword(7)">7</view>
						<view class="number-button" @click="inputPassword(8)">8</view>
						<view class="number-button" @click="inputPassword(9)">9</view>
					</view>
					<view class="number-row">
						<view class="number-button confirm" @click="submitPassword"><uni-icons type="checkmark"
								size="28"></uni-icons></view>
						<view class="number-button" @click="inputPassword(0)">0</view>
						<view class="number-button delete" @click="deletePassword()"><uni-icons type="trash"
								size="28"></uni-icons></view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 密码错误提示弹窗 -->
		<uni-popup ref="errorPopup" type="center">
			<view class="error-popup">
				<uni-icons type="clear" size="60" color="#FF4D4F"></uni-icons>
				<text class="error-message">密码输入错误</text>
				<text class="error-submessage">请重新输入</text>
			</view>
		</uni-popup>

		<!-- 提现成功提示 -->
		<uni-popup ref="successPopup" type="center" :mask="false">
			<view class="success-toast">
				<uni-icons type="success" size="60" color="#fff"></uni-icons>
				<text>余额提现已提交成功</text>
			</view>
		</uni-popup>
	</view>
</template>

<script src="./walletBalance.js"></script>

<style lang="scss" src="./walletBalance.scss"></style>
